<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('区域管理')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    .gray-bg {
        background-color: #FFFFFF;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="details-edit" AUTOCOMPLETE="OFF">
        <input type="hidden" id="companyId" name="companyId">
        <input type="hidden" id="proId" name="proId">
        <input type="hidden" id="programId" name="programId">
        <input type="hidden" id="firstForward" name="firstForward"
               th:value="${detail.firstForward}">
        <h4 class="form-header h4 secondDetails">二季度摸底（0）元</h4>
        <input type="hidden" name="secondDetails" id="secondDetails" th:value="${detail.secondDetails}">
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">四月摸底：</label>
                    <div class="col-sm-8">
                        <input id="aprDetail" name="aprDetail" class="form-control" type="number"
                               placeholder="请输入四月摸底" th:value="${detail.aprDetail}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">五月摸底：</label>
                    <div class="col-sm-8">
                        <input id="mayDetail" name="mayDetail" class="form-control" type="number"
                               placeholder="请输入五月摸底" th:value="${detail.mayDetail}">
                    </div>
                </div>
            </div>

        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">六月摸底：</label>
                    <div class="col-sm-8">
                        <input id="junDetail" name="junDetail" class="form-control" type="number"
                               placeholder="请输入六月摸底" th:value="${detail.junDetail}">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4 threeDetails">三季度预算（0）元</h4>
        <input type="hidden" name="threeDetails" id="threeDetails" th:value="${detail.threeDetails}">
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">七月摸底：</label>
                    <div class="col-sm-8">
                        <input id="julDetail" name="julDetail" class="form-control" type="number"
                               placeholder="请输入七月摸底" th:value="${detail.julDetail}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">八月摸底：</label>
                    <div class="col-sm-8">
                        <input id="augDetail" name="augDetail" class="form-control" type="number"
                               placeholder="请输入八月摸底" th:value="${detail.augDetail}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">九月摸底：</label>
                    <div class="col-sm-8">
                        <input id="sepDetail" name="sepDetail" class="form-control" type="number"
                               placeholder="请输入九月摸底" th:value="${detail.sepDetail}">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4 fourthDetails">四季度摸底（0）元</h4>
        <input type="hidden" name="fourthDetails" id="fourthDetails" th:value="${detail.fourthDetails}">
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">十月摸底：</label>
                    <div class="col-sm-8">
                        <input id="octDetail" name="octDetail" class="form-control" type="number"
                               placeholder="请输入十月摸底" th:value="${detail.octDetail}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">十一月摸底：</label>
                    <div class="col-sm-8">
                        <input id="novDetail" name="novDetail" class="form-control" type="number"
                               placeholder="请输入十一月摸底" th:value="${detail.novDetail}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">十二月摸底：</label>
                    <div class="col-sm-8">
                        <input id="decDetail" name="decDetail" class="form-control" type="number"
                               placeholder="请输入十二月摸底" th:value="${detail.decDetail}">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4 accFinish">全年完成（0）元</h4>
        <input type="hidden" name="accFinish" id="accFinish" th:value="${detail.accFinish}">
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">一月完成：</label>
                    <div class="col-sm-8">
                        <input name="janFinish" class="form-control" type="number"
                               placeholder="请输入一月完成" th:value="${detail.janFinish}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">二月完成：</label>
                    <div class="col-sm-8">
                        <input name="febFinish" class="form-control" type="number"
                               placeholder="请输入二月完成" th:value="${detail.febFinish}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">三月完成：</label>
                    <div class="col-sm-8">
                        <input name="marFinish" class="form-control" type="number"
                               placeholder="请输入三月完成" th:value="${detail.marFinish}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">四月完成：</label>
                    <div class="col-sm-8">
                        <input name="aprFinish" class="form-control" type="number"
                               placeholder="请输入四月完成" th:value="${detail.aprFinish}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">五月完成：</label>
                    <div class="col-sm-8">
                        <input name="mayFinish" class="form-control" type="number"
                               placeholder="请输入五月完成" th:value="${detail.mayFinish}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">六月完成：</label>
                    <div class="col-sm-8">
                        <input name="junFinish" class="form-control" type="number"
                               placeholder="请输入六月完成" th:value="${detail.junFinish}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">七月完成：</label>
                    <div class="col-sm-8">
                        <input name="julFinish" class="form-control" type="number"
                               placeholder="请输入七月完成" th:value="${detail.julFinish}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">八月完成：</label>
                    <div class="col-sm-8">
                        <input name="augFinish" class="form-control" type="number"
                               placeholder="请输入八月完成" th:value="${detail.augFinish}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">九月完成：</label>
                    <div class="col-sm-8">
                        <input name="sepFinish" class="form-control" type="number"
                               placeholder="请输入九月完成" th:value="${detail.sepFinish}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">十月完成：</label>
                    <div class="col-sm-8">
                        <input name="octFinish" class="form-control" type="number"
                               placeholder="请输入十月完成" th:value="${detail.octFinish}">
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">十一月完成：</label>
                    <div class="col-sm-8">
                        <input name="novFinish" class="form-control" type="number"
                               placeholder="请输入十一月完成" th:value="${detail.novFinish}">
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">十二月完成：</label>
                    <div class="col-sm-8">
                        <input name="decFinish" class="form-control" type="number"
                               placeholder="请输入十二月完成" th:value="${detail.decFinish}">
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4"></h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">次月摸底：</label>
                    <div class="col-sm-8">
                        <input id="nextDetail" name="nextDetail" class="form-control" type="number"
                               placeholder="请输入次月摸底" th:value="${detail.nextDetail}">
                    </div>
                </div>
            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>


<script th:inline="javascript">
    var companyId = [[${companyId}]];
    var proId = [[${proId}]];
    var programId = [[${programId}]];
    var prefix = ctx + "planbudget";
    $(function () {
        $("#companyId").val(companyId);
        $("#proId").val(proId);
        $("#programId").val(programId);
        $(".secondDetails").text("二季度摸底（" + $("#secondDetails").val() + "）元");
        $(".threeDetails").text("三季度摸底（" + $("#threeDetails").val() + "）元");
        $(".fourthDetails").text("四季度摸底（" + $("#fourthDetails").val() + "）元");
        $(".accFinish").text("全年完成（" + $("#accFinish").val() + "）元");
        var secondDetails;//二季度摸底
        var threeDetails;//三季度摸底
        var fourthDetails;//四季度摸底
        var accFinish;//全年完成

        $("input").change(function () {
            secondDetails = Number($("#aprDetail").val()) + Number($("#mayDetail").val()) +
                Number($("#junDetail").val());

            threeDetails = Number($("#julDetail").val()) + Number($("#augDetail").val()) + Number($("#sepDetail").val());

            fourthDetails = Number($("#octDetail").val()) + Number($("#novDetail").val()) + Number($("#decDetail").val());

            accFinish = Number($("input[name='janFinish']").val()) + Number($("input[name='febFinish']").val()) +
                Number($("input[name='marFinish']").val()) + Number($("input[name='aprFinish']").val()) +
                Number($("input[name='mayFinish']").val()) + Number($("input[name='junFinish']").val()) +
                Number($("input[name='julFinish']").val()) + Number($("input[name='augFinish']").val()) +
                Number($("input[name='sepFinish']").val()) + Number($("input[name='octFinish']").val()) +
                Number($("input[name='novFinish']").val()) + Number($("input[name='decFinish']").val());

            $("#secondDetails").val(secondDetails);
            $("#threeDetails").val(threeDetails);
            $("#fourthDetails").val(fourthDetails);
            $("#accFinish").val(accFinish);
            $(".secondDetails").text("二季度摸底（" + secondDetails + "）元");
            $(".threeDetails").text("三季度摸底（" + threeDetails + "）元");
            $(".fourthDetails").text("四季度摸底（" + fourthDetails + "）元");
            $(".accFinish").text("全年完成（" + accFinish + "）元");

        })

    })

    function submitHandler() {

        var data = $("#details-edit").serializeArray();
        $.operate.save(prefix + '/editDetail', data);
        parent.refresh();
    }

</script>
</body>
</html>